<template>
    <div class="banner" v-on:mouseover="stop()" v-on:mouseout="move()">
        <!--        @before-enter="beforeEnter"-->
        <!--        @enter="enter"-->
        <!--        @after-enter="afterEnter"-->
        <!--        v-show="cur === index"-->
<!--        :key="index" name="fade" v-for="(item, index) in imgData"-->
<!--        v-for="(item, index) in imgData"-->
        <transition  v-for="(item, index) in imgData"
                     :key="index">
<!--            为啥只有最后一个切换到第一个的时候 会有渐变啊 -->
<!--            v-if="index===cur"-->
<!--            <div-->
<!--                  v-for="(item, index) in imgData"-->
<!--                 :key="index">-->
                <div
                       >
                <img v-show="cur === index" class="banner-img" :src="item"/>

            </div>

            <!-- <img  :src="imgData[index]"/> -->
        </transition>
        <!--    :class="{active-img: index == cur }"-->
        <!--    :class="{active: index === cur?'active-img':'' }"-->
        <!-- https://cn.vuejs.org/v2/guide/class-and-style.html -->
        <!--        <img-->
        <!--                :class="{'active-img': index === cur,'fade-in-img': index !== cur}"-->

        <!--                v-for="(item, index) in imgData"-->
        <!--                :key="index"-->
        <!--                :src="item"-->
        <!--                v-show="cur === index"-->
        <!--        />-->
        <div class="banner-circle">
            <ul class="carouselNumber">
                <li
                        v-for="(item, index) in imgData"
                        :key="index"
                        :class="{ active: index == cur }"
                >
                    {{ index }}
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    import {reactive, toRefs, inject, onMounted} from "vue";

    export default {
        setup() {
            const state = reactive({
                // 拿到
                imgData: inject("imgData"),
                cur: 0, // 初始化值
                timer: null,
                isShow: false,
            });

            const beforeEnter = (el) => {
                console.log(el);
                state.isShow = false
                // el.style.transform = "translate(50px,50px)";
                el.style.transform = "translate(0px,0px)";
                //   el.style.transform = "translate(50px,0px)";
            };
            const enter = (el, done) => {
                el.offsetWidth;
                console.log("el.offsetWidth")
                console.log(el.offsetWidth)
                //   el.style.transform = "translate(150px,450px)";
                el.style.transform = "translate(150px,0px)";
                // https://developer.mozilla.org/zh-CN/docs/Web/CSS/translate
                // 往右边移动 进去的时候
                el.style.transition = "all 1s ease";
                done();
            };
            // 结束就是没了
            // const afterEnter = () => (state.isShow = false);
            const afterEnter = (el) => {
                console.log("el")
                console.log(el)
                state.isShow = false;
                el.style.transform = "translate(0px,0px)";
                el.style.transition = "all 1s ease";
            }
            // vue class 改变的时候 动画变
            // 组件里一个 动画 每次 移动 一个个 移出去 移动进来
            const autoplay = () => {
                state.cur++;
                state.cur = state.cur % state.imgData.length;
            };
            const play = () => {
                //    let  intervalMs=100
                // let intervalMs = 1000;
                // let intervalMs = 900;
                // let intervalMs = 1100;
                // let intervalMs = 2000;
                let intervalMs = 2500;
                // let  intervalMs=2000

                state.timer = setInterval(autoplay, intervalMs);
            };
            const stop = () => {
                clearInterval(state.timer);
            };
            const move = () => {
                play();
            };
            onMounted(() => {
                play();
            });
            const fadeInOut = () => {
                state.isShow = !state.isShow;
            };

            return {
                ...toRefs(state),
                play,
                stop,
                move,
                beforeEnter,
                enter,
                afterEnter,
                fadeInOut,
            };
        },
    };
</script>

<style scoped>

    .banner-img {
        display: block;
        position: absolute;
        /*width: 100%;*/
        /*height: 100%;*/
        top: 0;
        border-radius: 10px;
    }

    .fade-enter-active,
    .fade-leave-active {
        /*transition: opacity 0.5s;*/
        transition: opacity 1s;
    }

    .fade-enter,
    .fade-leave-to {
        opacity: 0;
    }


    .active-img {
        /* 从一个类变成另外一个类 会有变化效果吗 */
        /* v-show  过度动画 */
        /* transform: translate(150px,0); */
        /* transform: translate(150px, 20px); */
        /* transform: translate(150px, 0px); */
        /* transform 透明度 */
        /* transition: all 1s ease; */
        -webkit-transition: all 1.5s;
        -moz-transition: all 1.5s;
        -ms-transition: all 1.5s;
        -o-transition: all 1.5s;
        transition: all 1.5s;
        opacity: 0;
        /* 这是某一帧 */
    }

    .carouselNumber {
        list-style: none;
        display: flex;
        position: absolute;
        left: 300px;
        top: 300px;
    }

    .carouselNumber li {
        margin-left: 10px;
        height: 20px;
        width: 20px;
        background-color: white;
        color: salmon;
        border: 1px solid salmon;
        border-radius: 50%;
        text-align: center;
        line-height: 20px;
    }

    .carouselNumber li.active {
        color: white;
        background-color: salmon;
        /* transform: translate(150px,450px);
          transition: all 1s ease; */
    }

    .fade-in-img {
        -webkit-transition: all 1.5s;
        -moz-transition: all 1.5s;
        -ms-transition: all 1.5s;
        -o-transition: all 1.5s;
        transition: all 1.5s;
        opacity: 1;
    }
</style>
